<template>
  <div class="innerbox">
    <div class="box-all" :style="canvasStyle" @mousedown="clickHandle">
      <div class="box-tip">
        <el-popover placement="right" :width="400" trigger="hover">
          <template #reference>
            <el-icon size="25"><Picture /></el-icon>
          </template>
          <img src="@/assets/images/common/boxImg.png" style="width: 100%" />
        </el-popover>
      </div>

      <div class="box-b" id="in-box" style="width: 100%; height: calc(100%)">
        <div
          class="side left"
          :style="leftStyle"
          @mouseup="(e) => handledown(e, posiEnmu.left)"
        >
          <div class="tip">左(F)面</div>
          <DragBlock
            :side="posiEnmu.left"
            @drop="dragHandle"
            @dragover="dragoverHandle"
            :component="leftComponentList"
            shapeType="innerBox"
          />
        </div>
        <div
          class="side down"
          :style="downStyle"
          @mouseup="(e) => handledown(e, posiEnmu.down)"
        >
          <div class="tip">底(C)面</div>
          <DragBlock
            :side="posiEnmu.down"
            @drop="dragHandle"
            @dragover="dragoverHandle"
            :component="downComponentList"
            shapeType="innerBox"
          />
        </div>
        <div
          class="side right"
          :style="rightStyle"
          @mouseup="(e) => handledown(e, posiEnmu.right)"
        >
          <div class="tip">右(E)面</div>
          <DragBlock
            :side="posiEnmu.right"
            @drop="dragHandle"
            @dragover="dragoverHandle"
            :component="rightComponentList"
            shapeType="innerBox"
          />
        </div>
        <div
          class="side up"
          :style="upStyle"
          @mouseup="(e) => handledown(e, posiEnmu.up)"
        >
          <div class="tip">顶(A)面</div>
          <DragBlock
            :side="posiEnmu.up"
            @drop="dragHandle"
            @dragover="dragoverHandle"
            :component="upComponentList"
            shapeType="innerBox"
          />
        </div>
        <div
          class="side front"
          :style="frontStyle"
          @mouseup="(e) => handledown(e, posiEnmu.front)"
        >
          <div class="tip">前(B)面</div>
          <DragBlock
            :side="posiEnmu.front"
            @drop="dragHandle"
            @dragover="dragoverHandle"
            :component="frontComponentList"
            shapeType="innerBox"
          />
        </div>
        <div
          class="side back"
          :style="backStyle"
          data-set="s-back"
          @mouseup="(e) => handledown(e, posiEnmu.back)"
        >
          <div class="tip">后(D)面</div>
          <DragBlock
            :side="posiEnmu.back"
            @drop="dragHandle"
            @dragover="dragoverHandle"
            :component="backComponentList"
            shapeType="innerBox"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import editStore from "@/store/editStore.js";
import DragBlock from "./dragBlock.vue";
import { getGUID } from "@/utils/index";
import { Picture } from "@element-plus/icons-vue";

const posiEnmu = {
  left: "7", //F
  right: "6", //E
  up: "2", //A
  down: "4", //C
  front: "3", //B
  back: "5", //D
};

const store = editStore();
let mt = 20;
let selectedComponent = computed(() => store.selectedComponent);
let canvasStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + innerBox.boxHeigh * 2 + mt * 2 + "px",
    height: 2 * (innerBox.boxHeigh + innerBox.boxWidth) + mt * 2 + "px",
    transform: `scale(${innerBox.scale / 100})`,
  };
});
let leftStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxHeigh + "px",
    height: innerBox.boxWidth + "px",
    top: mt + innerBox.boxHeigh + "px",
    left: mt + "px",
  };
});
let downStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxWidth + "px",
    top: mt + innerBox.boxHeigh + "px",
    left: mt + innerBox.boxHeigh + "px",
  };
});
let rightStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxHeigh + "px",
    height: innerBox.boxWidth + "px",
    top: mt + innerBox.boxHeigh + "px",
    left: mt + innerBox.boxHeigh + innerBox.boxLength + "px",
  };
});
let upStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxWidth + "px",
    top: mt + 2 * innerBox.boxHeigh + innerBox.boxWidth + "px",
    left: mt + innerBox.boxHeigh + "px",
  };
});
let backStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxHeigh + "px",
    top: mt + "px",
    left: mt + innerBox.boxHeigh + "px",
  };
});
let frontStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxHeigh + "px",
    top: mt + innerBox.boxHeigh + innerBox.boxWidth + "px",
    left: mt + innerBox.boxHeigh + "px",
  };
});

let leftComponentList = computed(
  () => store.getCurrentInnerBox.leftComponentList
);
let downComponentList = computed(
  () => store.getCurrentInnerBox.downComponentList
);
let rightComponentList = computed(
  () => store.getCurrentInnerBox.rightComponentList
);
let upComponentList = computed(() => store.getCurrentInnerBox.upComponentList);
let frontComponentList = computed(
  () => store.getCurrentInnerBox.frontComponentList
);
let backComponentList = computed(
  () => store.getCurrentInnerBox.backComponentList
);

let boxSide = computed(() => {
  return {
    7: leftComponentList.value,
    4: downComponentList.value,
    6: rightComponentList.value,
    2: upComponentList.value,
    3: frontComponentList.value,
    5: backComponentList.value,
  };
});

const drag_key = "drag_key";

function dragHandle(e, type) {
  let drayDataString = e.dataTransfer.getData(drag_key);
  if (!drayDataString) return;
  let { offsetX, offsetY } = e;
  let materia = JSON.parse(drayDataString);
  materia.id = getGUID();
  materia.x = offsetX;
  materia.y = offsetY;
  materia.position = type;
  materia.reelType = 3; //盒标签
  boxSide.value[type].push(materia);
  store.changeSelectedComponent(materia);
}

function dragoverHandle(e) {
  e.preventDefault();
  e.stopPropagation();
  if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
}

function clickHandle() {
  store.changeSelectedComponent({ id: "InnerBox", type: "InnerBox" });
}

function handledown(e, type) {
  let range = e.target.closest(".edit-range-model");
  if (!range) return;
  if (selectedComponent.value.position == type) return;
  let source = selectedComponent.value.position;
  let { offsetX, offsetY } = e;
  selectedComponent.value.x = offsetX;
  selectedComponent.value.y = offsetY;
  selectedComponent.value.position = type;
  moveSide(type, source, selectedComponent.value);
}

function moveSide(target, source, component) {
  boxSide.value[target]?.push(JSON.parse(JSON.stringify(component)));
  let sourceCompIndex = boxSide.value[source].indexOf(component);
  if (sourceCompIndex > -1) {
    boxSide.value[source].splice(sourceCompIndex, 1);
  }
}
</script>
<style scoped lang="scss">
.innerbox {
  flex: 1;
  overflow: auto;
  .box-all {
    margin-top: 20px;
    margin-left: 20px;
    transform-origin: 20px 20px;
    background-color: rgba(214, 220, 242, 0.4);
    position: relative;
    .box-tip {
      position: absolute;
      top: 2px;
      right: 2px;
    }
    .side {
      position: absolute;
      outline: 1px dashed #eee;
      background-color: #904d15;
    }
    .tip {
      pointer-events: none;
      color: #999;
    }
  }
}
</style>
